<template>
	<view class="content">
		<view class="title">
			<view class="title-img">
				<image src="../../static/log.png"></image>
			</view>
			<view class="title-txt">售后订单报备系统</view>
		</view>
		<view class="form">

			<view class="form-item">
				<view class="form-item-wrap">
					<view class="form-item-label">渠道名称</view>
					<view class="form-item-val">
						<input type="text" v-model="form.supplier" placeholder="请输入您的团队名称">
					</view>
				</view>
			</view>

			<view class="form-item">
				<view class="form-item-wrap">
					<view class="form-item-label">提货金额</view>
					<view class="form-item-val">
						<input type="number" v-model="form.saleAmount" placeholder="请输入提货金额">
					</view>
				</view>
				<view class="form-tip">请勿乱填！订单退款会核实结算金额，金额不对无法打款！</view>
			</view>

			<view class="form-item">
				<view class="form-item-wrap">
					<view class="form-item-label">异常类型</view>
					<view class="form-item-val">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<input type="text" v-model="form.abnormal" placeholder="请选择异常类型" disabled="disabled">
							<view class="icon"></view>
						</picker>
					</view>
				</view>
			</view>

			<view class="form-item">
				<view class="form-item-wrap">
					<view class="form-item-label">游戏账号</view>
					<view class="form-item-val">
						<input type="text" v-model="form.account" placeholder="请输入游戏账号">
					</view>
				</view>
			</view>

			<view class="form-item">
				<view class="form-item-wrap">
					<view class="form-item-label">原绑定手机</view>
					<view class="form-item-val">
						<input type="text" v-model="form.changePhone" placeholder="请输入提货时的换绑手机">
					</view>
				</view>
			</view>

			<view class="form-item">
				<view class="form-item-wrap" style="align-items: flex-start;">
					<view class="form-item-label">账号情况</view>
					<view class="form-item-val">
						<textarea type="text" v-model="form.abnormityReason" class="big-txt"></textarea>
					</view>
				</view>
				<view class="form-tip">如有其他说明，请在账号情况内描述清楚以便快速给您解决异常！</view>
			</view>

			<view class="form-btn" @click="onSubmit">
				<text>提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['账号找回', '账号异常'],
				index: 0,
				form: {
					supplier: '', //渠道
					saleAmount: '', //金额
					abnormal: '', //异常类型
					account: '', //账号
					changePhone: '', //手机号
					abnormityReason: `一：此账号您在手期间是否出售、以及换绑过、给过他人验证码、密码：

二：此账号您之前绑定的电话是多少： 

三：此账号您最后一次登陆的时间以及地址： 

四：此账号的防沉迷实名您是否修改成为了您自己的： 

五：此账号您自己是否提交过申诉： 

六：你登入手机型号是什么 

以上六条请如实告知，如有别的信息也请如实说，如果没有如实告知，我们核实到有上述情况将不予归还账号及提供赔付，如查到恶意骗保所购买账号将全部失去包赔，经核实如有欺骗行为 直接按 诈骗罪 起诉 ！！！ `, //备注
				}
			}
		},
		methods: {
			bindPickerChange(e) {
				this.index = e.detail.value
				this.form.abnormal = this.array[this.index];
			},
			onSubmit() {

				if (!this.form.supplier) {
					return uni.showToast({
						title: "请输入渠道名称！",
						icon: "none"
					})
				}
				if (!this.form.saleAmount) {
					return uni.showToast({
						title: "请输入提货金额！",
						icon: "none"
					})
				}
				if (!this.form.abnormal) {
					return uni.showToast({
						title: "请选择异常类型！",
						icon: "none"
					})
				}
				if (!this.form.account) {
					return uni.showToast({
						title: "请输入账号！",
						icon: "none"
					})
				}
				if (!/^1\d{10}$/.test(this.form.changePhone)) {
					return uni.showToast({
						title: "您输入的手机号有误！",
						icon: "none"
					})
				}
				if (!this.form.abnormityReason) {
					return uni.showToast({
						title: "请输入备注！",
						icon: "none"
					})
				}

				uni.showToast({
					title: "提交中",
					icon: "loading"
				})
				let that = this;
				uni.request({
					url: "http://39.101.77.212:9090/prod-api/api/processing",
					method: "POST",
					data: that.form,
					success(res) {
						uni.hideLoading()
						console.log(res);
						if (res.data.code == 200) {
							uni.showToast({
								title: "提交成功！",
								icon: "success",
								success() {
									setTimeout(() => {
										that.form = {
											supplier: '',
											saleAmount: '',
											abnormal: '',
											account: '',
											changePhone: '',
											abnormityReason: ''
										};
										uni.pageScrollTo({
											scrollTop: 0,
											duration: 100,
										})
									}, 1000)
								}
							})
						} else {
							uni.showToast({
								title: "提交失败！",
								icon: "success"
							})
						}
					},
					fail(err) {
						uni.showToast({
							title: "提交失败！",
							icon: "success"
						})
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #EFEFEF;
	}

	.content {
		max-width: 960px;
		background-color: #fff;
		margin: 0 auto;
		padding-top: 90rpx;
		padding-bottom: 36rpx;
		min-width: 100px;

		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 54rpx;

			.title-img {
				width: 80rpx;
				height: 80rpx;
				margin-right: 32rpx;
				background-color: #488DFE;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.title-txt {
				font-size: 44rpx;
				font-weight: bold;
				color: #488DFE;

			}
		}

		.form {
			width: 100%;

			.form-item {
				margin: 0 72rpx 40rpx 60rpx;

				.form-item-wrap {
					display: flex;
					align-items: center;

					.form-item-label {
						width: 130rpx;
						margin-right: 20rpx;
						font-size: 26rpx;
						color: #3D3D3D;
						font-weight: bold;
						text-align: right;
						white-space: nowrap;
					}

					.form-item-val {
						position: relative;
						flex: 1;
						background-color: #FAFBFC;

						input {
							height: 72rpx;
							border: 2rpx solid #C5D0E2;
							border-radius: 16rpx;
							padding-left: 28rpx;
							font-size: 28rpx;
							color: #919EB7;
						}

						.uni-input-placeholder,
						.uni-textarea-placeholder {
							color: #919EB7;
							font-size: 26rpx;
						}

						textarea {
							height: 920rpx;
							width: 100%;
							border: 2rpx solid #C5D0E2;
							color: #919EB7;
							font-size: 26rpx;
							border-radius: 16rpx;
							padding: 20rpx 26rpx;
							box-sizing: border-box;
						}

						.icon {
							position: absolute;
							right: 30rpx;
							top: 28%;
							transform: rotate(-45deg);
							width: 16rpx;
							height: 16rpx;
							border: 4rpx solid #cecece;
							border-right-color: transparent;
							border-top-color: transparent;
						}
					}
				}

				.form-tip {
					margin-left: 154rpx;
					margin-top: 18rpx;
					font-size: 26rpx;
					color: #FF2C2C;
				}
			}

			.form-btn {
				width: 260rpx;
				height: 96rpx;
				line-height: 96rpx;
				border-radius: 20rpx;
				background-color: #116BFF;
				font-size: 28rpx;
				color: #fff;
				text-align: center;
				margin: 0 auto;

				&:active {
					opacity: .8;
				}
			}
		}
	}
</style>